<template>
	<view style="overflow: hidden;">
		<template v-if="!isprod"> 
			<!--  
		 
		注意：这是 H5、微信小程序界面，请勿和 new_index.nvue、index.nvue 混用
		 
		1. new_index.nvue、index.nvue这两个是App页面
		 
		2. 另外：data.js 是上一版本留下的假数据，这一版改成了 URL 请求了（如不需要可以删除，也可作为后端请求参考）
		 
		3. 请各位大神多多留手，我已经把请求内存开到最大了
		 
		4. 视频 id 切记是字符串类型  
		 -->
			<!-- #ifdef MP -->
			<swiper
				:style="'width: ' + windowWidth + 'px; height: ' +(windowHeight) + 'px; background: linear-gradient(to bottom, #111, #333);'"
				:vertical="true" @animationfinish="animationfinish" @change="change" :current="current"
				:indicator-dots="false" @touchstart="mpTouchstart" @touchend="mpTouchend">
				<swiper-item v-for="(list, index) in dataList" :key="index">
					<view v-if="Math.abs(k - index) <= 1">
						<view>
							<!-- 
						1.v-if：用于控制视频在节点的渲染数
						2.muted的默认值是 false，代表默认是禁音视频的
						3.http-cache默认开启视频缓存
						4.poster（封面（方案一））：这里的封面默认处理存储在阿里云的视频
						5.show-loading：这里默认去掉播放转圈的标志
						v-if="Math.abs(k-index)<=1"
						 -->
							<video v-if="isShow" :id="list.id + '' + index" :loop="true" :muted="list.isplay"
								:controls="false" :http-cache="true" :page-gesture="false" :show-fullscreen-btn="false"
								:show-loading="false" :show-center-play-btn="false" :enable-progress-gesture="false"
								:src="list.videoUrl" @ended="ended" @click="tapVideoHover(list.state, $event)"
								@timeupdate="timeupdate($event, index)"
								:style="'width: ' +windowWidth +'px; height: ' +windowHeight +'px; background: linear-gradient(to bottom, #111, #333); z-index: -1;'"
								:poster="list.videoCoverUrl?list.videoCoverUrl:list.videoUrl + '?x-oss-process=video/snapshot,t_100,f_jpg'"
								:object-fit="objectFit"></video>
							<!-- contain显示长的小的有黑边 fill:填充会变形  cover:显示短边长的截取-->
							<!-- 仅在当前索引渲染 video 元素，旁边项使用封面 image 占位 -->
							<!-- <video v-if="k === index && isShow" :id="list.id + '' + index" :loop="true"
							:muted="list.isplay" :controls="false" preload="metadata" playsinline webkit-playsinline
							x5-playsinline="true" :http-cache="true" :page-gesture="false" :show-fullscreen-btn="false"
							:show-loading="false" :show-center-play-btn="false" :enable-progress-gesture="false"
							:src="list.src" @ended="ended" @click="tapVideoHover(list.state, $event)"
							@timeupdate="timeupdate($event, index)"
							:style="'width: ' +windowWidth +'px; height: ' +windowHeight +'px; background: linear-gradient(to bottom, #111, #333); z-index: -1;'"
							:poster="list.src + '?x-oss-process=video/snapshot,t_100,f_jpg'"
							:object-fit="objectFit"></video> -->
							<!-- 
						1.这里是封面（方案二）：这里的封面可以自定义。
						2.也在代码中做了批注，两种方案可以共存，不会相互影响。
						-->
							<image v-if="!list.playIng"
								:src="list.videoCoverUrl?list.videoCoverUrl:list.videoUrl + '?x-oss-process=video/snapshot,t_100,f_jpg'"
								:style="'width: ' +windowWidth +'px; height: ' + windowHeight +'px; position: absolute;' "
								:mode="imgFit"></image>
							<!-- <image v-if="k !== index || !isShow"
							:src="list.src + '?x-oss-process=video/snapshot,t_100,f_jpg'"
							:style="'width: ' +windowWidth +'px; height: ' + windowHeight +'px; position: absolute;'"
							:mode="imgFit"></image> -->
						</view>
						<!-- 播放状态：pause 的时候就会暂停 -->
						<view class="videoHover" @click="tapVideoHover(list.state, $event)" :style="
              'width: ' + windowWidth + 'px; height: ' + windowHeight + 'px;'
            ">
							<image v-if="list.state == 'pause'" class="playState" src="/static/img/index/play.png">
							</image>
						</view>
						<view class="userInfo">
							<!-- 1.头像 -->
							<image @click="tozuozhe" class="userAvatar" :src="list.href" mode="aspectFill"></image>
							<!-- 2.点赞 -->
							<view @click="cLike(list.likeFlag)" class="info-item">
								<image :src="`/static/commen/xin_o${list.likeFlag==1?'n':'ff'}.png`" class="info-img">
								</image>
								<text class="info-num">{{ list.likeNum }}</text>
							</view>
							<!-- 3.评论 -->
							<view @click="toComment(index)" class="info-item">
								<image src="/static/commen/comment.png" class="info-img"></image>
								<text class="info-num">{{ list.commentNum }}</text>
							</view>
							<!-- 4.收藏 -->
							<view @click="collectionFlag(list.collectionFlag)" class="info-item">
								<image :src="`/static/commen/sc_o${list.collectionFlag==1?'n':'ff'}.png`"
									class="info-img">
								</image>
								<text class="info-num">{{ list.collectionNum }}</text>
							</view>
							<!-- 5.分享 -->
							<view @click="share" class="info-item">
								<image src="/static/commen/shareIcon.png" class="info-img"></image>
								<text class="info-num">分享</text>
							</view>
						</view>
						<!-- 最底下的文字部分 -->
						<view class="content">
							<text class="userName"
								:style="'width: ' + (windowWidth - 90) + 'px;'">@{{ list.nickName }}</text>
							<text class="words"
								:style="'width: ' + (windowWidth - 90) + 'px;'">{{ list.videoTitle }}</text><!-- i={{i}} -->
							<text class="words"
								:style="'width: ' + (windowWidth - 90) + 'px;'">{{ list.videoText }}-{{ k + 1 }}</text><!-- k={{k}} -->
						</view>
						<!-- 进度条 -->
						<view v-if="k === index" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
							:style="
              'width: ' +
              (windowWidth - windowWidth * 0.1) +
              'px; margin-left: ' +
              windowWidth * 0.05 +
              'px; height: 40px; position: absolute; bottom: 10px;'
            ">
							<!-- 不拖动情况下 -->
							<view>
								<!-- 1.底部背景进度条 -->
								<view :style="
                  'width: ' +
                  (windowWidth - windowWidth * 0.1) +
                  'px; margin-top: 18px; height: 1px; border-radius: 10px; background-color: #999999; opacity: 0.6;'
                ">
								</view>
								<!-- 2.播放的进度条 -->
								<view v-if="!isTouch" :style="
                  'width: ' +
                  (windowWidth - windowWidth * 0.1) * progressBarPercent +
                  'px; position: absolute; margin-top: 18px;top: 0; height: 1px; border-radius: 10px; background-color: #fff; '
                ">
								</view>
								<!--  -->
								<view v-if="isTouch" :style="
                  'width: ' +
                  (videoStartPositon + addPositon) +
                  'px; position: absolute; margin-top: 18px; height: 1px;top: 0; border-radius: 10px; background-color: #fff; '
                ">
								</view>
								<view v-if="!isTouch" :style="
                  'width: 6px;height:6px;margin-left:-3px; position: absolute; margin-top: 15px; top: 0; border-radius: 50%; background-color: #fff;left:' +
                  (windowWidth - windowWidth * 0.1) * progressBarPercent +
                  'px'
                ">
								</view>
								<view v-if="isTouch" :style="
                  'width: 6px;height:6px;;margin-left:-3px; position: absolute; margin-top: 15px; top: 0; border-radius: 50%; background-color: #fff;left:' +
                  (videoStartPositon + addPositon) +
                  'px'
                ">
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- #endif -->
		</template>
		<view v-else>
			<message></message>
		</view>
		<!-- 登录弹窗 -->
		<yf-login-popup ref="login"></yf-login-popup>  
		<!-- tabbar栏 -->
		<yf-tabbar fill fixed safeBottom native :zIndex="98"></yf-tabbar>
		<yf-comment title="评论" v-model="showPopup" :vid="videoID"></yf-comment>
	</view>
</template>

<script>
	// import userList from '../new_index/data.js'//这个是假数据
	import {
		mapState,
		mapActions
	} from 'vuex'
	let audo = uni.createInnerAudioContext();
	audo.loop = true;
	import message from "./message.vue"
	export default {
		components: {
			message
		},
		data() {
			return {
				lastTimeUpdate: 0, // 限流 timeupdate
				windowWidth: 0,
				windowHeight: 0,
				platform: "",
				model: "",
				deleteHeight: 0,
				objectFit: "contain",
				imgFit: "aspectFit",
				dataList: [
					// 	{
					// 	id: "1",
					// 	username: "南昌众康医院",
					// 	href: "https://static.scrmzk.com/zk-h5/video/1.jpg",
					// 	title: "晒背养生真的有用吗？如何正确晒背？",
					// 	msg: "#晒背",
					// 	state: "pause",
					// 	like: 0,
					// 	like_n: 0,
					// 	sms_n: 0,
					// 	src: "https://static.scrmzk.com/zk-h5/video/1.mp4",
					// 	playNumber: 0,
					// 	pinlun: [],
					// 	playIng: false,
					// 	isShowimage: false,
					// 	isShowProgressBarTime: false,
					// 	isplay: true,
					// 	userID: "abcdefghijklmn67891",
					// },
				],
				k: 0,
				voice: "",
				timeout: "",
				current: 0,
				boxStyle: {
					//视频，图片封面样式🌟💗
					height: 0,
					width: 0,
				},
				videoID: "",
				isShow: false, 
				showPlay: false, //转轮显示控制
				rotates: 0, //转轮旋转角度
				rotateTime: "", //转轮递归事件控制
				xrotats: "", 
				mpcleartime: "", 
				isClick: false,
				changeTimeout: "",
				mptime: 0,
				mpstartTime: 0,
				duration: 500,
				// -- 进度条相关 -- start
				videoStartPositon: 0,
				progressBarPercent: 0,
				touchStartPosition: 0,
				addPositon: 0,
				timeduration: 0,
				isTouch: false,
				// -- 进度条相关 -- end
				videoParams: {
					pageNum: 1,
					pageSize: 10
				},
				loadingType: 'more',
				showPopup:false,//评论弹窗
			};
		},
		computed: {
			...mapState(['isprod'])
		},
		watch: {
			async k(k, old_k) {
				// console.log(k, old_k)
				this.progressBarPercent = 0;
				// #ifndef MP
				this.clearToTime();
				// #endif
				this.isShow = false;
				this.dataList[old_k].playIng = false; //如果视频暂停，就加载封面
				this.dataList[old_k].isplay = true;
				this.dataList[old_k].state = "pause";
				console.log(
					"预留第" +
					(old_k + 1) +
					"个视频：" +
					this.dataList[old_k].id +
					"" +
					old_k
				);
				// 2.0版本已经去掉了下面这一句，视频不用暂停，只需要把声音禁止就行
				uni
					.createVideoContext(this.dataList[old_k].id + "" + old_k, this)
					.stop(); //如果视频暂停，那么旧视频停止，这里的this.dataList[old_k].id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
				console.log("已经暂停 --> 第" + (old_k + 1) + "个视频～"); //提示
				this.dataList[k].state = "play";
				this.isShow = true;
				this.xrotats = setTimeout(() => {
					this.showPlay = true;
					// #ifndef MP
					this.rotateX();
					// #endif
				}, 200);
				// #ifdef MP
				// 如果是小程序端
				clearTimeout(this.changeTimeout);
				this.dataList[k].isplay = false;
				setTimeout(() => {
					this.dataList[k].playIng = true;
				}, 250);
				if (this.mptime < 0.2) {
					this.changeTimeout = setTimeout(() => {
						uni
							.createVideoContext(this.dataList[this.k].id + "" + this.k, this)
							.play();
					}, 1400);
				} else {
					uni
						.createVideoContext(this.dataList[this.k].id + "" + this.k, this)
						.play();
				}
				// #endif
				// #ifdef H5
				this.dataList[k].isplay = true;
				audo.src = this.dataList[k].src;
				if (this.isClick) {
					setTimeout(() => {
						if (typeof WeixinJSBridge == "undefined") {
							setTimeout(() => {
								audo.play();
								uni
									.createVideoContext(this.dataList[k].id + "" + k, this)
									.seek(0);
								uni
									.createVideoContext(this.dataList[k].id + "" + k, this)
									.play();
								setTimeout(() => {
									this.dataList[k].playIng = true;
								}, 650);
							}, 500);
						} else {
							WeixinJSBridge.invoke("getNetworkType", {}, (e) => {
								setTimeout(() => {
									audo.play();
									uni
										.createVideoContext(this.dataList[k].id + "" + k,
											this)
										.seek(0);
									uni
										.createVideoContext(this.dataList[k].id + "" + k,
											this)
										.play();
									setTimeout(() => {
										this.dataList[k].playIng = true;
									}, 850);
								}, 200);
							});
						}
					}, 200);
				} else {
					audo.pause();
					this.dataList[k].state = "pause";
					uni.createVideoContext(this.dataList[k].id + "" + k, this).seek(0);
					uni.createVideoContext(this.dataList[k].id + "" + k, this).pause();
				}
				// #endif
				var p = k + 1;
				console.log(
					"预加载第" + (p + 1) + "个视频：" + this.dataList[p].id + "" + p
				);
			},
		},
		onLoad() {
			if (uni.getSystemInfoSync().windowHeight < 750) {
				this.objectFit = 'cover'
				this.imgFit = 'aspectFill'
			}
			this.platform = uni.getSystemInfoSync().platform;
			this.model = uni.getSystemInfoSync().model;
			var model = this.model;
			// if (this.platform == 'ios' && (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' || model !==
			// 		'iPhone8')) {
			// 	this.deleteHeight = 0 //有 tabbar的 修改这里可以改变视频高度
			// }

			console.log(uni.getSystemInfoSync(), "uni.getSystemInfoSync()")
			const safeBottom = uni.getSystemInfoSync().safeAreaInsets?.bottom || 0;
			console.log(safeBottom, "safeBottomsafeBottom")
			this.deleteHeight = safeBottom;
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			this.windowHeight =
				uni.getSystemInfoSync().windowHeight - safeBottom - uni.upx2px(96); //有 tabbar的 修改这里可以改变视频高度
			this.boxStyle.width = this.windowWidth + "px"; //给宽度加px
			this.boxStyle.height =
				this.windowHeight - safeBottom - uni.upx2px(96) + "px"; //有 tabbar的 修改这里可以改变视频高度
			this.getVideoContent(true); //刚进入页面加载数据
			// #ifndef MP
			this.rotateX();
			// #endif
		},
		onShow() {
			console.log("回到前台");
			if (this.dataList.length !== 0) {
				// #ifdef MP
				this.dataList[this.k].state = "play";
				this.dataList[this.k].isplay = false;
				uni
					.createVideoContext(this.dataList[this.k].id + "" + this.k, this)
					.play();
				// #endif
				// #ifdef H5
				if (this.isClick) {
					this.dataList[this.k].state = "play";
					uni
						.createVideoContext(this.dataList[this.k].id + "" + this.k, this)
						.play();
					audo.play();
				}
				// #endif
			} else {
				this.getVideoContent(true); //刚进入页面加载数据
			}
		},
		onHide() {
			// #ifdef MP
			this.dataList[this.k].state = "pause";
			uni
				.createVideoContext(this.dataList[this.k].id + "" + this.k, this)
				.pause();
			// #endif
			// #ifdef H5
			if (this.isClick) {
				this.dataList[this.k].state = "pause";
				uni
					.createVideoContext(this.dataList[this.k].id + "" + this.k, this)
					.pause();
				audo.pause();
			}
			// #endif
			console.log("到后台");
		},
		methods: {
			getHeight(e) {
				console.log(e, "ee");
				this.deleteHeight = e;
				this.windowWidth = uni.getSystemInfoSync().windowWidth;
				this.windowHeight = uni.getSystemInfoSync().windowHeight - e;
				this.boxStyle.width = this.windowWidth + "px"; //给宽度加px
				this.boxStyle.height = this.windowHeight - e; //有 tabbar的 修改这里可以改变视频高度
			},
			mpTouchend() {
				this.mptime = new Date() / 1000 - this.mpstartTime;
			},
			mpTouchstart() {
				this.mpstartTime = new Date() / 1000;
			},
			dealVoice() {
				uni.showToast({
					title: "处理声音",
					icon: "none",
				});
			},
			clearToTime() {
				//清理定时器
				for (let i = 0; i < 20; i++) {
					clearTimeout(this.rotateTime);
					clearTimeout(this.xrotats);
					this.showPlay = false;
					this.rotates = 0;
				}
			},
			clearTime() {
				//清理定时器
				for (let i = 0; i < 20; i++) {
					clearTimeout(this.rotateTime);
					clearTimeout(this.xrotats);
				}
			},
			rotateX() {
				// clearTimeout(this.rotateTime);
				this.rotateTime = setTimeout(() => {
					this.rotateX();
					this.showPlay = true;
					this.rotates += 1;
				}, 30);
			},
			closeScrollview() {
				// 点击评论里面的叉叉，就会关闭评论
				this.$refs.pinglun.close();
			},
			ended() {
				// 1.播放当前视频结束时触发，自动切换下一个视频
				// this.current = this.k+1
			},
			// ---- 进度条相关 --- start
			touchstart(e) {
				// console.log(e);
				console.log("touchstart", e);
				this.isTouch = true;
				// #ifdef H5
				if (this.isClick) {
					this.addPositon = 0;
					this.videoStartPositon =
						(this.windowWidth - this.windowWidth * 0.1) * this.progressBarPercent;
					this.touchStartPosition = e.changedTouches[0].clientX;
				}
				// #endif
				// #ifdef MP
				this.addPositon = 0;
				this.videoStartPositon =
					(this.windowWidth - this.windowWidth * 0.1) * this.progressBarPercent;
				this.touchStartPosition = e.changedTouches[0].clientX;
				// #endif
			},
			touchmove(e) {
				console.log("touchmove", e);
				// console.log(e);
				// #ifdef H5
				if (this.isClick) {
					let num = e.changedTouches[0].clientX - this.touchStartPosition;
					if (
						this.videoStartPositon + num <=
						this.windowWidth - this.windowWidth * 0.1
					) {
						this.addPositon =
							e.changedTouches[0].clientX - this.touchStartPosition;
					} else {
						this.addPositon = 0;
						this.videoStartPositon = this.windowWidth - this.windowWidth * 0.1;
					}
				}
				// #endif
				// #ifdef MP
				let num = e.changedTouches[0].clientX - this.touchStartPosition;
				if (
					this.videoStartPositon + num <=
					this.windowWidth - this.windowWidth * 0.1
				) {
					this.addPositon = e.changedTouches[0].clientX - this.touchStartPosition;
				} else {
					this.addPositon = 0;
					this.videoStartPositon = this.windowWidth - this.windowWidth * 0.1;
				}
				// #endif
			},
			touchend(e) {
				console.log("touchend", e);
				// #ifdef H5
				if (this.isClick) {
					let per = Number(
						(this.videoStartPositon + this.addPositon) /
						(this.windowWidth - this.windowWidth * 0.1)
					);
					let timeSubmit = parseInt(this.timeduration * per);
					audo.seek(timeSubmit);
					audo.play();
					uni
						.createVideoContext(this.dataList[this.k].id + "" + this.k, this)
						.seek(timeSubmit);
					uni
						.createVideoContext(this.dataList[this.k].id + "" + this.k, this)
						.play();
					this.dataList[this.k].state = "play";
					setTimeout(() => {
						this.isTouch = false;
					}, 500);
				}
				// #endif
				// #ifdef MP
				let per = Number(
					(this.videoStartPositon + this.addPositon) /
					(this.windowWidth - this.windowWidth * 0.1)
				);
				let timeSubmit = parseInt(this.timeduration * per);
				audo.seek(timeSubmit);
				audo.play();
				uni
					.createVideoContext(this.dataList[this.k].id + "" + this.k, this)
					.seek(timeSubmit);
				uni
					.createVideoContext(this.dataList[this.k].id + "" + this.k, this)
					.play();
				this.dataList[this.k].state = "play";
				this.dataList[this.k].isplay = false;
				setTimeout(() => {
					this.isTouch = false;
				}, 500);
				// #endif
			},
			timeupdate(event, index) {
				// 触发进度条更新
				// console.log(event,index);
				if (index === this.k) {
					this.timeduration = event.detail.duration;
					this.progressBarPercent = parseFloat(
						Number(event.detail.currentTime / event.detail.duration)
					);
				}
				// if (index !== this.k) return;
				// const now = Date.now();
				// if (now - this.lastTimeUpdate < 120) return; // 每120ms更新一次
				// this.lastTimeUpdate = now;
				// // 只更新必要字段，避免触发大量计算
				// this.timeduration = event.detail.duration || this.timeduration;
				// this.progressBarPercent = Number(
				// 	(event.detail.currentTime || 0) / (event.detail.duration || 1)
				// );
			},
			// ---- 进度条相关 --- ending
			//点击播放&&暂停
			tapVideoHover(state, event) {
				console.log("state--", state);
				if (state == "play" || state == "continue") {
					this.dataList[this.k].state = "pause";
				} else {
					this.dataList[this.k].state = "continue";
				}
				if (this.dataList[this.k].state == "continue") {
					this.isClick = true;
					this.dataList[this.k].playIng = true;
					uni
						.createVideoContext(this.dataList[this.k].id + "" + this.k, this)
						.play(); //暂停以后继续播放
					// #ifdef MP
					this.dataList[this.k].isplay = false;
					// #endif
					// #ifdef H5
					audo.play();
					// #endif
				}
				if (this.dataList[this.k].state == "pause") {
					uni
						.createVideoContext(this.dataList[this.k].id + "" + this.k, this)
						.pause(); //暂停以后继续播放
					// #ifdef MP
					this.dataList[this.k].isplay = true;
					// #endif
					// #ifdef H5
					audo.pause();
					// #endif
				}
			},
			change(event) {
				this.k = event.detail.current;
			},
			animationfinish(event) {
				// 1.这里进行判断，如果是最后一个视频就进入 get() 方法加载视频进入列表
				if (this.k == this.dataList.length - 1) {
					if (this.loadingType == 'noMore') {
						return;
					}
					this.videoParams.pageNum = this.videoParams.pageNum + 1;
					this.getVideoContent();
				}
			},
			// 获取视频
			getVideoContent(isFirst = false) {
				let that = this
				// // 1.这里引入后端请求数据
				this.$apis.getVideoContent(this.videoParams).then(result => {
					console.log(result, "result")
					let _data = result;
					if (_data.code == 200 && _data.rows) {
						//判断是否有数据，有则取数据
						// 2.这里把视频添加到视频列表
						that.dataList = that.dataList.concat(_data.rows);
						if (_data.rows.length < 10) {
							that.loadingType = 'noMore';
						} else {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							that.loadingType = 'more';
						}

						if (!isFirst) return
						this.isShow = false;
						// 3.播放当前视频
						setTimeout(() => {
							this.isShow = true;
							// 如果是小程序端
							this.dataList[this.k].isplay = false;
							this.dataList[this.k].state = "play";
							this.dataList[this.k].playIng = true;
							setTimeout(() => {
								uni.createVideoContext(this.dataList[this.k].id + "" + this.k,
									this).play();
							}, 500);
						}, 200);
						this.videoID = this.dataList[this.k].id;
					}
				})

			},
			share() {
				uni.showToast({
					title: "分享",
					icon: "none",
				});
			},
			tozuozhe() {
				this.$refs.login.openDrawer()
			},
			toComment(index) {
				this.showPopup=true
				// 注意点击评论之后会执行这里
				/*
				（1）先加载缓冲
				（2）获取当前视频 ID 信息
				（3）🌟🌟🌟🌟重要🌟🌟🌟🌟
					- 一定要记得看 index.vue 里面
					 uni.setStorageSync("user",this.peopleList[i]);
					 这个东西，用于存储当前用户信息。在 插件里面会使用到这个东西，
					 记得写一下。
					 
				（4）打开评论
				*/
				uni.showToast({
					title: "加载中...",
					icon: "none",
					position: "bottom",
					duration: 300,
				});
				uni.setStorageSync("videoID", this.dataList[index].id);
				this.videoID = this.dataList[index].id;
				this.$refs.pinglun.open("bottom");
			},
			// 点赞切换
			cLike(status) {
				if (this.$api.checkLogin()) {
					this.toggleVideoOperate(1, status === 0);
				}
			},
			// 收藏切换
			collectionFlag(status) {
				if (this.$api.checkLogin()) {
					this.toggleVideoOperate(2, status === 0);
				}
			},
			// 统一操作处理
			toggleVideoOperate(type, isAdd) {
				const video = this.dataList[this.k];
				const apiCall = isAdd ?
					this.$apis.videoOperate({
						videoId: video.id,
						operateType: type
					}) :
					this.$apis.cancelVideoOperate({
						videoId: video.id,
						operateType: type
					});

				apiCall.then(res => {
					// 定义字段映射
					const fieldMap = {
						1: {
							flag: 'likeFlag',
							count: 'likeNum'
						},
						2: {
							flag: 'collectionFlag',
							count: 'collectionNum'
						}
					};
					const {
						flag,
						count
					} = fieldMap[type];

					// 更新状态和计数
					if (res.code == 200) {
						this.$set(this.dataList[this.k], flag, isAdd ? 1 : 0);
						this.$set(this.dataList[this.k], count, video[count] + (isAdd ? 1 : -1));
					}
				}).catch(err => {
					console.error('操作失败:', err);
					// 可选：操作失败时恢复原状态（需保存操作前状态）
				});
			}
		},
	};
</script>

<style lang="scss">
	swiper-item{
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
		flex-grow: 0;
		flex-basis: auto;
		align-items: stretch;
		align-content: flex-start;
		view,
		label, 
		scroll-view {
			display: flex;
			flex-direction: column;
			flex-shrink: 0;
			flex-grow: 0;
			flex-basis: auto;
			align-items: stretch;
			align-content: flex-start;
		}
	} 
	view,
	image,
	input,
	scroll-view,
	swiper,
	swiper-item,
	text,
	textarea,
	video {
		position: relative;
		border: 0px solid #000000;
		box-sizing: border-box;
	}

	swiper-item {
		position: absolute;
	}

	button {
		margin: 0;
	}

	.container {
		background-color: #000000;
	}

	.item {
		/* width : 750rpx; */
		background-color: #000000;
		position: relative;
	}

	.videoHover {
		position: absolute;
		top: 0;
		left: 0;
		flex: 1;
		background-color: rgba(0, 0, 0, 0.1);
		justify-content: center;
		align-items: center;
		display: flex;

		/* border-style: dashed;
		border-color: #DD524D;
		border-width: 1px; */
	}

	.playState {
		width: 160rpx;
		height: 160rpx;
		opacity: 0.2;
	}

	.userInfo {
		position: absolute;
		bottom: 110px;
		right: 10px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.info-item {
		opacity: 0.9;
		position: relative;
		margin-top: 30rpx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.info-img {
		width: 68rpx;
		height: 68rpx;
	}

	.info-num {
		font-weight: bold;
		font-size: 28rpx;
		color: #ffffff;
		text-align: center;
	}

	.userAvatar {
		border-radius: 50%;
		border-style: solid;
		margin-bottom: 10rpx;
		border-width: 2px;
		border-color: #ffffff;
	}

	.userAvatar {
		width: 96rpx;
		height: 96rpx;
	}

	.likeIco,
	.shareIco,
	.commentIco {
		width: 60rpx;
		height: 60rpx;
		margin-top: 15px;
	}

	.likeNum,
	.commentNum,
	.shareTex {
		color: #ffffff;
		font-size: 30rpx;
		text-align: center;
		margin: 5px;
	}

	.likeNumActive {
		color: red;
	}

	.content {
		width: 620rpx;
		z-index: 99;
		position: absolute;
		bottom: 50px;
		display: flex;
		/* justify-content: center; */
		padding: 15rpx 15rpx 15rpx 40rpx;
		flex-direction: column;
		justify-content: flex-start;
		color: #ffffff;
		/* background-color: aqua; */
	}

	.userName {
		font-weight: bold;
		font-size: 32rpx;
		margin-top: 80upx;
		line-height: 44rpx;
		color: #ffffff;
	}

	.words {
		margin-top: 24rpx;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 40rpx;
	}

	.root {
		background-color: #000000;
	}
</style>